<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机归属地查询</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="/css/phone.css" rel="stylesheet" type="text/css">
    <script>
        function isPoneAvailable(num) {
            var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (!myreg.test(num)) {
                return false;
            } else {
                return true;
            }
        }

        $(document).ready(function () {
            $("#confirm").click(function () {

                var phone = $("#phone").val();
                if(!isPoneAvailable(phone)) {
                    alert("请输入有效的11位手机号码");
                    return;
                }

                $.ajax({
                    url: "/recognizePhone",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    data: '{"phone":"' + phone + '"}',

                    success: function (data) {
                        if(data==""||data==null) {
                            clearInfo();
                            showSearchFailed();
                            return;
                        }

                        showSearchSuccess();
                        //部署数据
                        var $title =$("#content").find(".title");
                        $($title[0]).find(".info").html(phone);

                        var $content =$("#content").find(".content-info");
                        $($content[0]).find(".info").html(data.province + " " + data.city);
                        $($content[1]).find(".info").html(data.operator);
                        $($content[2]).find(".info").html(data.cityCode);
                        $($content[3]).find(".info").html(data.postCode);

                    },
                    error: function () {
                        showSearchFailed();
                        clearInfo();
                    }
                })
            })
        });
        function showSearchSuccess() {
            $("#search-result").removeClass("search-failed");
            $("#search-result").addClass("search-success");
            $("#search-result").html("查询成功");
        }
        
        function showSearchFailed() {
            $("#search-result").removeClass("search-success");
            $("#search-result").addClass("search-failed");
            $("#search-result").html("查询失败");
        }
        function clearInfo() {
            var $title =$("#content").find(".title");
            $($title[0]).find(".info").html("");


            var $content =$("#content").find(".content-info");
            $($content[0]).find(".info").html("");
            $($content[1]).find(".info").html("");
            $($content[2]).find(".info").html("");
            $($content[3]).find(".info").html("");
        }

    </script>
</head>
<body>
<div class="search-bar">
    <div class="search-bar-inner">
        <input type="tel" name="phone" id="phone" placeholder="输入手机号码" class="search">
        <input type="button" name="confirm" value="搜索" id="confirm" class="btn">
    </div>
</div>

<div id="search-result" class="result">
</div>

<div class="content" id="content">
    <div class="content-inner">
        <div class="title">
            <div class="label">您要查找的手机号码是：</div>
            <div class="info"></div>
        </div>

        <div class="line"></div>
        <div class="content-info">
            <div class="label">归属地</div>
            <div class="info"></div>
        </div>

        <div class="content-info">
            <div class="label">运营商</div>
            <div class="info"></div>
        </div>
        <div class="content-info">
            <div class="label">区号</div>
            <div class="info"></div>
        </div>
        <div class="content-info">
            <div class="label">邮编</div>
            <div class="info"></div>
        </div>
        <div class="content-info">
            <div class="label"></div>
            <div class="info"></div>
        </div>
    </div>
</div>
</body>
</html>